<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>售后评价与结果反馈</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.feedback-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.feedback-tabs {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			margin-bottom: 25px;
			overflow: hidden;
		}
		.tab-header {
			display: flex;
			background: #f8f9fa;
			border-bottom: 1px solid #e9ecef;
		}
		.tab-item {
			flex: 1;
			padding: 15px 20px;
			text-align: center;
			cursor: pointer;
			transition: all 0.3s;
			border-bottom: 3px solid transparent;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}
		.tab-item.active {
			background: #fff;
			color: #409eff;
			border-bottom-color: #409eff;
		}
		.evaluation-cards {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
			gap: 20px;
			margin-bottom: 25px;
		}
		.evaluation-card {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
		}
		.evaluation-card:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
		}
		.card-header {
			padding: 20px;
			border-bottom: 1px solid #f0f2f5;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.case-info {
			flex: 1;
		}
		.case-number {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			margin-bottom: 8px;
		}
		.case-type {
			background: #f0f9ff;
			color: #1890ff;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
			display: inline-block;
			margin-bottom: 8px;
		}
		.case-desc {
			font-size: 14px;
			color: #666;
			line-height: 1.4;
		}
		.case-status {
			text-align: center;
		}
		.status-badge {
			padding: 6px 12px;
			border-radius: 6px;
			font-size: 12px;
			font-weight: 500;
			margin-bottom: 8px;
			display: inline-block;
		}
		.status-pending {
			background: #fff7e6;
			color: #fa8c16;
		}
		.status-completed {
			background: #f6ffed;
			color: #52c41a;
		}
		.card-content {
			padding: 20px;
		}
		.rating-section {
			margin-bottom: 20px;
		}
		.rating-title {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 10px;
		}
		.rating-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			gap: 15px;
			margin-bottom: 15px;
		}
		.rating-item {
			text-align: center;
		}
		.rating-label {
			font-size: 12px;
			color: #666;
			margin-bottom: 8px;
		}
		.star-rating {
			display: flex;
			justify-content: center;
			gap: 4px;
			margin-bottom: 5px;
		}
		.star {
			font-size: 18px;
			color: #ddd;
			cursor: pointer;
			transition: color 0.2s;
		}
		.star.active {
			color: #faad14;
		}
		.star:hover {
			color: #faad14;
		}
		.rating-score {
			font-size: 12px;
			color: #999;
		}
		.feedback-input {
			margin-bottom: 15px;
		}
		.feedback-label {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 8px;
		}
		.feedback-textarea {
			width: 100%;
			min-height: 80px;
			padding: 8px 12px;
			border: 1px solid #e9ecef;
			border-radius: 6px;
			font-size: 14px;
			resize: vertical;
		}
		.feedback-textarea:focus {
			border-color: #409eff;
			outline: none;
		}
		.image-upload {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
			margin-bottom: 15px;
		}
		.upload-item {
			width: 80px;
			height: 80px;
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.2s;
		}
		.upload-item:hover {
			border-color: #409eff;
		}
		.upload-icon {
			font-size: 24px;
			color: #999;
		}
		.card-actions {
			padding: 15px 20px;
			border-top: 1px solid #f0f2f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.case-meta {
			font-size: 12px;
			color: #999;
		}
		.completed-feedback {
			background: #f0f9ff;
			border-radius: 8px;
			padding: 15px;
		}
		.completed-rating {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
		.overall-score {
			font-size: 18px;
			font-weight: bold;
			color: #faad14;
		}
		.completed-text {
			font-size: 14px;
			color: #666;
			line-height: 1.4;
			margin-bottom: 10px;
		}
		.feedback-images {
			display: flex;
			gap: 8px;
			margin-bottom: 10px;
		}
		.feedback-image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
			object-fit: cover;
			cursor: pointer;
		}
		.feedback-time {
			font-size: 12px;
			color: #999;
			text-align: right;
		}
		.statistics-panel {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			margin-bottom: 25px;
		}
		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}
		.stat-item {
			text-align: center;
			background: rgba(255, 255, 255, 0.1);
			padding: 15px;
			border-radius: 8px;
		}
		.stat-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.stat-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.no-data {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.loading-state {
			text-align: center;
			padding: 60px 20px;
			color: #999;
		}
		.quality-tags {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			margin-bottom: 15px;
		}
		.quality-tag {
			padding: 4px 8px;
			background: #f0f9ff;
			color: #409eff;
			border: 1px solid #b3d8ff;
			border-radius: 4px;
			font-size: 12px;
			cursor: pointer;
			transition: all 0.2s;
		}
		.quality-tag.selected {
			background: #409eff;
			color: white;
		}
		.improvement-suggestions {
			background: #f8f9fa;
			border-radius: 6px;
			padding: 12px;
			margin-top: 15px;
		}
		.suggestion-title {
			font-size: 13px;
			font-weight: 500;
			color: #333;
			margin-bottom: 8px;
		}
		.suggestion-list {
			font-size: 12px;
			color: #666;
			line-height: 1.4;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="feedback-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>售后评价与结果反馈</h2>
				<p>对售后服务进行评分、提供意见和建议</p>
			</div>

			<!-- 统计概览 -->
			<div class="statistics-panel">
				<h3><i class="el-icon-star-on"></i> 评价统计概览</h3>
				<div class="stats-grid">
					<div class="stat-item">
						<div class="stat-number">{{stats.totalEvaluations}}</div>
						<div class="stat-label">总评价数</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.avgRating}}</div>
						<div class="stat-label">平均评分</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.pendingCount}}</div>
						<div class="stat-label">待评价</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.satisfactionRate}}%</div>
						<div class="stat-label">满意度</div>
					</div>
				</div>
			</div>

			<!-- 评价状态切换 -->
			<div class="feedback-tabs">
				<div class="tab-header">
					<div 
						v-for="tab in feedbackTabs" 
						:key="tab.value"
						:class="['tab-item', {active: activeTab === tab.value}]"
						@click="switchTab(tab.value)">
						<i :class="tab.icon"></i>
						{{tab.label}} ({{tab.count}})
					</div>
				</div>
			</div>

			<!-- 评价卡片列表 -->
			<div v-if="loading" class="loading-state">
				<i class="el-icon-loading" style="font-size: 32px; margin-bottom: 10px;"></i>
				<p>正在加载评价信息...</p>
			</div>

			<div v-else-if="!feedbackCases || feedbackCases.length === 0" class="no-data">
				<i class="el-icon-star-off" style="font-size: 48px; color: #ddd; margin-bottom: 15px;"></i>
				<p>暂无{{getTabLabel(activeTab)}}记录</p>
			</div>

			<div v-else class="evaluation-cards">
				<div v-for="caseItem in filteredCases" :key="caseItem.id" class="evaluation-card">
					<div class="card-header">
						<div class="case-info">
							<div class="case-number">{{caseItem.caseNumber}}</div>
							<span :class="['case-type', 'type-' + caseItem.type]">{{caseItem.typeName}}</span>
							<div class="case-desc">{{caseItem.description}}</div>
						</div>
						<div class="case-status">
							<span :class="['status-badge', 'status-' + caseItem.evaluationStatus]">
								{{caseItem.statusText}}
							</span>
						</div>
					</div>
					
					<div class="card-content">
						<!-- 待评价状态 -->
						<div v-if="caseItem.evaluationStatus === 'pending'">
							<div class="rating-section">
								<div class="rating-title">服务评价</div>
								<div class="rating-grid">
									<div class="rating-item">
										<div class="rating-label">服务态度</div>
										<div class="star-rating">
											<i v-for="n in 5" :key="'attitude' + n" 
												:class="['el-icon-star-off', 'star', {active: n <= caseItem.ratings.attitude}]"
												@click="setRating(caseItem, 'attitude', n)">
											</i>
										</div>
										<div class="rating-score">{{caseItem.ratings.attitude || 0}} 分</div>
									</div>
									<div class="rating-item">
										<div class="rating-label">处理效率</div>
										<div class="star-rating">
											<i v-for="n in 5" :key="'efficiency' + n" 
												:class="['el-icon-star-off', 'star', {active: n <= caseItem.ratings.efficiency}]"
												@click="setRating(caseItem, 'efficiency', n)">
											</i>
										</div>
										<div class="rating-score">{{caseItem.ratings.efficiency || 0}} 分</div>
									</div>
									<div class="rating-item">
										<div class="rating-label">解决方案</div>
										<div class="star-rating">
											<i v-for="n in 5" :key="'solution' + n" 
												:class="['el-icon-star-off', 'star', {active: n <= caseItem.ratings.solution}]"
												@click="setRating(caseItem, 'solution', n)">
											</i>
										</div>
										<div class="rating-score">{{caseItem.ratings.solution || 0}} 分</div>
									</div>
									<div class="rating-item">
										<div class="rating-label">整体满意度</div>
										<div class="star-rating">
											<i v-for="n in 5" :key="'overall' + n" 
												:class="['el-icon-star-off', 'star', {active: n <= caseItem.ratings.overall}]"
												@click="setRating(caseItem, 'overall', n)">
											</i>
										</div>
										<div class="rating-score">{{caseItem.ratings.overall || 0}} 分</div>
									</div>
								</div>
							</div>

							<div class="quality-tags">
								<span v-for="tag in qualityTags" :key="tag"
									:class="['quality-tag', {selected: caseItem.selectedTags && caseItem.selectedTags.includes(tag)}]"
									@click="toggleTag(caseItem, tag)">
									{{tag}}
								</span>
							</div>

							<div class="feedback-input">
								<div class="feedback-label">详细评价</div>
								<textarea 
									v-model="caseItem.feedbackText" 
									class="feedback-textarea"
									placeholder="请描述您对本次售后服务的具体感受和建议...">
								</textarea>
							</div>

							<div class="feedback-input">
								<div class="feedback-label">上传图片（可选）</div>
								<div class="image-upload">
									<div class="upload-item" @click="uploadImage(caseItem)">
										<i class="el-icon-plus upload-icon"></i>
									</div>
								</div>
							</div>
						</div>

						<!-- 已评价状态 -->
						<div v-else class="completed-feedback">
							<div class="completed-rating">
								<span>综合评分：</span>
								<span class="overall-score">{{caseItem.completedRating.overall}} 分</span>
							</div>
							<div class="completed-text">{{caseItem.completedRating.comment}}</div>
							<div class="feedback-images" v-if="caseItem.completedRating.images && caseItem.completedRating.images.length > 0">
								<img v-for="(img, index) in caseItem.completedRating.images" :key="index" 
									:src="img" class="feedback-image" @click="previewImage(img)">
							</div>
							<div class="feedback-time">评价时间：{{caseItem.completedRating.submitTime}}</div>
							
							<div class="improvement-suggestions" v-if="caseItem.completedRating.overall < 4">
								<div class="suggestion-title">改进建议：</div>
								<div class="suggestion-list">
									• 加强客服培训，提升服务专业度<br>
									• 优化处理流程，缩短响应时间<br>
									• 完善质量管控，减少商品问题
								</div>
							</div>
						</div>
					</div>
					
					<div class="card-actions">
						<div class="case-meta">
							处理完成时间：{{caseItem.resolveTime}} | 处理时长：{{caseItem.processDuration}}
						</div>
						<div v-if="caseItem.evaluationStatus === 'pending'">
							<el-button size="small" @click="saveDraft(caseItem)">保存草稿</el-button>
							<el-button size="small" type="primary" @click="submitEvaluation(caseItem)" 
								:disabled="!canSubmit(caseItem)">提交评价</el-button>
						</div>
						<div v-else>
							<el-button size="small" @click="viewDetail(caseItem)">查看详情</el-button>
							<el-button size="small" @click="modifyEvaluation(caseItem)" v-if="canModify(caseItem)">修改评价</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					loading: false,
					activeTab: 'pending',
					feedbackTabs: [
						{label: '待评价', value: 'pending', icon: 'el-icon-edit', count: 0},
						{label: '已评价', value: 'completed', icon: 'el-icon-check', count: 0}
					],
					feedbackCases: [],
					qualityTags: ['服务专业', '响应及时', '态度友好', '解决彻底', '超出预期', '有待改进'],
					stats: {
						totalEvaluations: 45,
						avgRating: 4.2,
						pendingCount: 3,
						satisfactionRate: 87.5
					}
				}
			},
			computed: {
				filteredCases() {
					return this.feedbackCases.filter(caseItem => caseItem.evaluationStatus === this.activeTab);
				}
			},
			methods: {
				switchTab(tab) {
					this.activeTab = tab;
				},
				
				getTabLabel(tab) {
					const tabMap = {
						'pending': '待评价',
						'completed': '已评价'
					};
					return tabMap[tab] || tab;
				},
				
				setRating(caseItem, dimension, rating) {
					if (!caseItem.ratings) {
						this.$set(caseItem, 'ratings', {});
					}
					this.$set(caseItem.ratings, dimension, rating);
				},
				
				toggleTag(caseItem, tag) {
					if (!caseItem.selectedTags) {
						this.$set(caseItem, 'selectedTags', []);
					}
					const index = caseItem.selectedTags.indexOf(tag);
					if (index > -1) {
						caseItem.selectedTags.splice(index, 1);
					} else {
						caseItem.selectedTags.push(tag);
					}
				},
				
				canSubmit(caseItem) {
					return caseItem.ratings && 
						   caseItem.ratings.attitude && 
						   caseItem.ratings.efficiency && 
						   caseItem.ratings.solution && 
						   caseItem.ratings.overall;
				},
				
				canModify(caseItem) {
					// 评价后7天内可以修改
					const submitTime = new Date(caseItem.completedRating.submitTime);
					const now = new Date();
					const diffDays = (now - submitTime) / (1000 * 60 * 60 * 24);
					return diffDays <= 7;
				},
				
				saveDraft(caseItem) {
					this.$message.success('评价草稿已保存');
				},
				
				submitEvaluation(caseItem) {
					if (!this.canSubmit(caseItem)) {
						this.$message.warning('请完成所有项目的评分');
						return;
					}
					
					this.$confirm('确定提交评价吗？提交后7天内可以修改。', '提交评价', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'info'
					}).then(() => {
						// 模拟提交评价
						caseItem.evaluationStatus = 'completed';
						caseItem.statusText = '已评价';
						caseItem.completedRating = {
							overall: caseItem.ratings.overall,
							comment: caseItem.feedbackText || '用户未留言',
							submitTime: new Date().toLocaleString(),
							images: []
						};
						
						this.updateTabCounts();
						this.$message.success('评价提交成功');
					});
				},
				
				uploadImage(caseItem) {
					this.$message.info('上传图片功能');
				},
				
				previewImage(img) {
					this.$message.info('预览图片功能');
				},
				
				viewDetail(caseItem) {
					this.$message.info(`查看案例详情：${caseItem.caseNumber}`);
				},
				
				modifyEvaluation(caseItem) {
					this.$message.info(`修改评价：${caseItem.caseNumber}`);
				},
				
				loadFeedbackCases() {
					this.loading = true;
					
					// 模拟API请求
					setTimeout(() => {
						this.feedbackCases = [
							{
								id: 1,
								caseNumber: 'AS2024011501',
								type: 'return',
								typeName: '退换货',
								description: '有机小白菜质量问题退货',
								evaluationStatus: 'pending',
								statusText: '待评价',
								resolveTime: '2024-01-18 14:30:00',
								processDuration: '2天8小时',
								ratings: {},
								feedbackText: '',
								selectedTags: []
							},
							{
								id: 2,
								caseNumber: 'AS2024011401',
								type: 'damage',
								typeName: '破损补发',
								description: '三文鱼包装破损补发',
								evaluationStatus: 'completed',
								statusText: '已评价',
								resolveTime: '2024-01-16 14:20:00',
								processDuration: '1天22小时',
								completedRating: {
									overall: 5,
									comment: '处理非常及时，客服态度很好，补发的商品质量很棒！',
									submitTime: '2024-01-17 09:30:00',
									images: []
								}
							},
							{
								id: 3,
								caseNumber: 'AS2024011301',
								type: 'complaint',
								typeName: '投诉',
								description: '配送员服务态度问题',
								evaluationStatus: 'pending',
								statusText: '待评价',
								resolveTime: '2024-01-15 16:45:00',
								processDuration: '1天4小时',
								ratings: {},
								feedbackText: '',
								selectedTags: []
							},
							{
								id: 4,
								caseNumber: 'AS2024011201',
								type: 'refund',
								typeName: '退款',
								description: '重复支付退款申请',
								evaluationStatus: 'completed',
								statusText: '已评价',
								resolveTime: '2024-01-13 10:15:00',
								processDuration: '6小时',
								completedRating: {
									overall: 4,
									comment: '退款处理比较快，但是客服响应时间有点慢',
									submitTime: '2024-01-14 11:20:00',
									images: []
								}
							}
						];
						
						this.updateTabCounts();
						this.loading = false;
					}, 1000);
				},
				
				updateTabCounts() {
					this.feedbackTabs.forEach(tab => {
						tab.count = this.feedbackCases.filter(c => c.evaluationStatus === tab.value).length;
					});
				}
			},
			
			mounted() {
				this.loadFeedbackCases();
			}
		});
	</script>
</body>
</html>